body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td,
.el-checkbox__label {
  color: #FFF;
}

.mavon-editor-box * {
  // color: #666;
  color: #fff !important;
}

.router-link-active {
  color: #fff;
}

.el-message-box__message p {
  color: #333;
}

body,
html {
  // background: #1F2128;
  background: #1A1E2C;

  .header-box {
    background-color: rgba(#141722, 1);
  }
}

.el-menu-item {
  &:hover {
    background: #141722;
  }
}

#app {
  .layout {
    // background: #1F2128;
    background: #1A1E2C;
  }

  // .layout-content,
  .markdown-box,
  // .detail-box,
  .slot,
  // .info-item,
  .detail-layout,
  .el-dialog,
  // .el-pager li,
  // .el-table th,
  // .el-table tr,
  .el-drawer,
  .table-layout,
  .menu-box,
  // .alike-lis li .alike-lis-box,
  .has-vers-lis li,
  .has-vers-lis .ver-table,
  // .el-table__empty-block,
  .el-tree,
  .el-tree-node__content:hover,
  .el-upload-list__item:hover,
  .is-focusable.el-tree-node.is-expanded.is-current,
  .is-focusable:active,
  .is-focusable:visited,
  .el-input-group__append,
  .el-input-group__prepend,
  .el-tree-node:focus>.el-tree-node__content,
  .el-pagination.is-background .btn-next,
  .el-pagination.is-background .btn-prev,
  .el-pagination.is-background .el-pager li {
    // background: #242730;
    // background: #242730 !important;
    background: #202432 !important;
  }

  .pagination-box {
    .el-input__inner {
      border: 1px solid rgba(#fff, .2) !important;
    }

    .el-pager {
      li {
        border: 1px solid rgba(#fff, .2);
      }

      .active {
        background: #177DDC !important;
        border: 1px solid #177DDC;
      }
    }
  }

  .alike-lis li .alike-lis-box {
    background: #0D0E15;

    &:hover {
      background: #353B69;
    }
  }

  .alike-lis {
    .alike-lis-title {
      color: #CED6E3;
    }

    .alike-lis-hint {
      color: #A4ADCD;
    }

    .alike-lis-user {
      color: #A4ADCD;
    }
  }

  .alike-lis-both {
    .lis-both-item {
      // background: #242730 !important;
      // background: #202432 !important;
    }
  }

  .mavon-look-box .v-show-content.scroll-style.scroll-style-border-radius {
    // background: #1A1A1A !important;
    // background: #242730 !important;
    background: #171C2B !important;
  }

  .markdown-box {
    pre {
      background: #000 !important;

      .hljs {
        background: #000;
      }
    }

    table,
    tr,
    th,
    td {
      background: transparent !important;
    }
  }

  .el-pagination.is-background .btn-next.disabled,
  .el-pagination.is-background .btn-next:disabled,
  .el-pagination.is-background .btn-prev.disabled,
  .el-pagination.is-background .btn-prev:disabled,
  .el-pagination.is-background .el-pager li.disabled,
  .el-step__title.is-process {
    color: #606266;
  }

  // .el-dropdown-link {
  // 	border: 1px solid rgba(#808080, .5);
  // 	background: rgba(#808080, 1);
  // }

  .tabs-box {
    .el-tabs__nav-wrap {
      background-color: transparent;

      .el-tabs__header {
        border: 0;
      }

      &::after {
        height: 0;
      }

      .el-tabs__nav-scroll {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;

        .el-tabs__item {
          // font-size: 1.1875rem;
          text-align: center;
          line-height: 3.375rem;
        }

        .is-active {
          color: #d3ff00;
          border: 0 !important;
          height: 5px;
          background-color: #d3ff00;
          top: 0;
        }

        .el-tabs__active-bar {
          height: 5px;
          background-color: #d3ff00;
          top: 0;
        }
      }
    }

    .el-tabs__item {
      color: #F1F1F1;
    }

    .el-tabs__item.is-active {
      color: #409EFF;
    }
  }

  .tabs-left {
    padding: 0 20px;

    .el-tabs__nav-wrap {

      &::after {
        width: 100%;
        height: 1px;
        background-color: #4E5776 !important;
      }
    }

    .el-tabs__item {
      text-align: center;
      color: #A4ADCD;
      font-size: 14px;
      margin: 0;
      padding: 0 20px;

      &.is-active {
        color: #019AFF;
      }
    }
  }

  .none-type,
  .el-input__inner,
  .el-textarea__inner,
  .drop-box,
  .el-steps--simple {
    background: #333B54;
    border-color: #4A567E;
    color: #B8C2E5 !important;
  }

  .el-input,
  .el-textarea,
  .el-cascader__dropdown,
  .el-select-dropdown {
    overflow: hidden;
  }

  .el-input-number {

    .el-input-number__decrease,
    .el-input-number__increase {
      background: #202432;
      border-color: #4A567E;
    }

    .input__inner {
      border: 0;
    }
  }

  .el-radio-button__inner {
    background: #333B54;
    color: #B8C2E5;
    border: 0;
    box-shadow: 0 0 0 transparent;

    &:hover {
      color: #FFF;
    }
  }

  .el-radio-button__orig-radio:checked+.el-radio-button__inner {
    background: #4A567E;
    color: #FFF;
    border: 0;
    box-shadow: 0 0 0 transparent;
  }

  .has-vers-lis .lis-header .lis-header-name span,
  .handle-btn-hollow,
  .code-layout .state-title,
  .info-title,
  .outin-handle a,
  .el-form-item__label,
  .el-dialog__title,
  .info-item-name {
    color: #F1F1F1;
  }

  .has-ver-table-layout *,
  .lis-header * {
    // background: #242730 !important;
    // background: #202432 !important;
  }

  .has-vers-lis .lis-header {
    background: transparent;
  }

  .code-layout.content-detail,
  .node-module,
  .el-table--enable-row-hover .el-table__body tr:hover>td,
  .has-vers-lis .lis-header {
    // background: rgba(0, 119, 255, 0.06);
    background: #202432 !important;
  }

  .podUrl-box {
    .info-item {
      background: transparent;
    }
  }

  .home-monitoring {
    li {
      // background: #242730;
      background: #202432;

      .name {
        color: #F1F1F1;
      }
    }
  }

  .mavon-editor-box {

    .v-note-op,
    .dropdown-item,
    .v-note-edit,
    .content-input-wrapper,
    .auto-textarea-input,
    .v-show-content,
    .v-note-panel {
      background: #171C2B !important;
      color: #fff !important;
    }
  }

  .table-data {
    background: #202432;
  }

  .el-menu {
    background: transparent;

    .menu-icon::before {
      background: #a4adcd;
    }

    .is-active {
      background: transparent;

      .menu-icon::before {
        background: #d3ff00;
      }
    }
  }

  .el-menu--vertical {
    background: #212635 !important;
  }

  .el-menu-item-group {
    background: #212635 !important;
  }

  .menu {
    background: #2c3246;
    // background: #212635;

    .el-menu-item-group {
      background: #212635 !important;

      * {
        background: #212635;
      }

      .menu-icon::before {
        background: #d3ff00;
      }
    }


    li {
      color: #FFF;

      &::before {
        // background: #FFF;
      }
    }
  }

  .el-menu {
    z-index: 9999;

    .el-menu-item * {
      color: #8492C2 !important;
    }

    .is-active {
      background: #212637;

      * {
        color: #019AFF !important;
      }
    }
  }

  .page-title,
  .el-radio {
    color: #FFF;
  }

  .content {
    &::-webkit-scrollbar-thumb:window-inactive {
      background: rgba(255, 255, 255, .3);
    }
  }

  .network-in,
  .network-out {
    background: rgba(255, 255, 255, .3);

    span {
      color: #F1F1F1;
    }
  }

  .has-color.el-table th {
    background: rgba(255, 255, 255, 0);
  }

  .has-color.el-table td {
    background: rgba(255, 255, 255, .2);
  }

  .has-color.el-table .has-color-header {
    background: #e0e6ee;

    .cell {
      color: #3383b6;
    }
  }

  .el-breadcrumb {
    .el-breadcrumb__item {
      .el-breadcrumb__inner {
        color: #FFF;
      }
    }
  }
}

.logo {
  .img {
    background: url(~@/assets/img/logo.png) no-repeat !important;
    background-size: 100% !important;
  }
}

.markdown-box *,
.code-materials *,
.el-textarea *,
.el-table *,
.el-collapse-item * {
  // background: #242730 !important;
  // background: #202432 !important;
}

:deep(.el-radio-group) {
  .el-radio-button__inner {
    background: #333B54 !important;
    border-color: #4A567E !important;
    color: #B8C2E5 !important;
  }

  .is-active .el-radio-button__inner {
    background: rgba(132, 146, 194, 1) !important;
  }

  // /deep/ .el-radio-button__orig-radio:checked+.el-radio-button__inner {
  // 	background: rgba(132, 146, 194, 1) !important;
  // 	color: rgba(255, 255, 255, 1) !important;
  // 	border: 1px solid rgba(132, 146, 194, 1) !important;
  // }
}

.markdown-box * {

  .v-note-panel {

    color: #fff !important;
  }
}

.large-icon {

  li {
    .name {
      color: #FFF;
    }
  }
}

.search-box {
  .el-button {
    border: 0;
    color: #fff;
    background: #808080;
  }
}

body {
  .el-popover {
    color: #fff;
    background: #0D0E15;
    border: 1px solid #2A2E46;

    .breviary-title {
      color: #8492C2;
    }

    .breviary-detail {
      color: #fff;
    }
  }

  .el-popper[x-placement^=right] .popper__arrow {

    // border-right-color: #242730;
    &::after {
      // border-right-color: #242730;
      border-right-color: #0D0E15;
    }
  }

  .el-cascader-menu,
  .el-select-dropdown {
    // background: #242730;
    background: #202432;
  }

  .el-cascader-node:not(.is-disabled):focus,
  .el-cascader-node:not(.is-disabled):hover,
  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background: rgba(0, 119, 255, 0.06);
  }

  .add-alike-title {
    border-bottom: 1px solid #4A567E;
  }

  .el-popper[x-placement^=bottom] .popper__arrow {

    &::after {
      // border-bottom-color: #242730;
      border-bottom-color: #0D0E15;
    }
  }

  .el-popper[x-placement^=left] .popper__arrow {

    &::after {
      // border-left-color: #242730;
      border-left-color: #0D0E15;
    }
  }

  .el-popper[x-placement^=top] .popper__arrow {

    &::after {
      // border-top-color: #242730;
      border-top-color: #0D0E15;
    }
  }

  .branch .is-active {
    background: rgba(0, 0, 0, 0) !important;
  }

  .el-submenu.is-active .el-submenu__title {
    border-bottom-color: rgba(0, 0, 0, 0);
  }

  .branch .is-active {
    background: rgba(0, 0, 0, 0);
  }

  .el-dropdown-menu {
    background: #333;

    .el-dropdown-menu__item {
      &:hover * {
        color: #333;
      }
    }
  }

}


.el-select-dropdown {
  background: #2C3246 !important;
  border: 1px solid #3E476C !important;
}

.el-scrollbar {
  background: #2C3246 !important;
  border: 1px solid #3E476C !important;

  .el-select-dropdown__wrap {
    margin-right: -20px !important;
    margin-bottom: -20px !important;
  }

  .el-select-dropdown__item {
    color: #A4ADCD !important;
    border-bottom: 1px solid rgba(#3E476C, .7) !important;
  }

  .el-select-dropdown__item:last-child {
    border: 0;
  }

  .el-select-dropdown__item:hover {
    background: #54618B;

    span {
      color: #A4ADCD !important;
    }
  }
}

.code-layout {
  .info-item {
    li {
      border-bottom: 1px solid rgba(#eee, .1) !important;
    }
  }

  .list-box {
    border-right: 1px solid rgba(#eee, .2) !important;

    .metrice-list-box {
      margin-top: 20px;

      .title {
        border-bottom: 1px solid rgba(#eee, .2) !important;
      }
    }
  }
}

.drawer-box {
  // background: #242730;
  background: #202432;
  box-shadow: 5px 0 10px rgba(#000, .1);

  .infinite-list {
    // background: #242730 !important;
    background: #202432 !important;
    padding: 10px 20px;

    .infinite-item {
      border: 1px solid #333;
      border-radius: 5px;
      overflow: hidden;
      margin: 10px 0;
      height: 90px;
      display: flex;
      position: relative;

      .infinite-item-left {
        // width: 50px;
        width: 30px;
      }

      .tag {
        position: absolute;
        bottom: 10px;
        right: 10px;
      }

      .infinite-item-center {
        width: 55%;
      }

      .infinite-item-right {
        width: 45%;
      }
    }

    .infinite-item.is-active {
      background: #5A658E;

      .title {
        color: #fff !important;
      }

      .desc {
        color: #eee !important;
      }
    }

    .title {
      color: #dce0ee !important;
    }

    .desc {
      color: #a4adcd !important;
      width: 100%;
      display: -webkit-inline-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      white-space: normal;
    }

    .tag {
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;

      * {
        margin-right: 5px;

        &:last-child {
          margin: 0;
        }
      }
    }
  }
}

.drawer-box-table {
  // background: #242730;
  background: #202432;
}

.header-box {
  // background: #242730;
  background: #202432;

  .user .text {
    color: #fff;
  }

  .user-box {
    .avatar {
      background: url(~@/assets/img/user-avatar-dark.svg) no-repeat;
      background-size: 100%;
    }
  }
}

.avatar {
  background: url(~@/assets/img/user-avatar-dark.svg) no-repeat;
  background-size: 100%;
}

.el-table td,
.el-table th {
  border-bottom: 1px solid rgba(#9AAFF9, .19) !important;
}

.el-table th {
  background: #202432 !important;

  .cell {
    color: #707BA3;
  }
}

.el-table__empty-block,
.el-table tr {
  background: #1A1E2C !important;
}

.el-table::before {
  // background: rgba(#eee, .3) !important;
  background: transparent;
}

.dag-box {

  .dag-nav-item,
  .task-name {
    color: #fff;
  }

  .dag-nav,
  .panel-left,
  .panel-right .right-content {
    background: #282D40;
  }

  .wrap .panel-left {
    background: #282D40;

    * {
      color: #fff;
    }
  }

  .x6-graph-box,
  .panel-center {
    background: #1A1E2C;
  }

  .x6-graph-box {
    .x6-cell.x6-node {

      rect {
        fill: #468ff4 !important;
        stroke: #468ff4 !important;
      }

      text {
        fill: #fff !important;
      }
    }
  }

  .tool-bar {
    background: #1A1E2C !important;
  }

  .panel-right {
    .right-content {

      .widget-title,
      .el-checkbox__label {
        color: #fff !important;
      }

      .el-tab-pane {
        .items {
          .widget {
            .widget-title {
              line-height: 2em;
            }

            .el-input__inner,
            .el-textarea__inner {
              background: #15181D !important;
              border: 1px solid #4A567E !important;
            }

            .el-input__inner {
              height: 30px;
            }
          }
        }
      }

      .el-tabs__content {

        .el-form-item__label {
          color: #fff !important;
          line-height: 2em !important;
        }

        .el-input__inner,
        .el-textarea__inner {
          background: #15181D !important;
          border: 1px solid #4A567E !important;
        }
      }

      .el-button {
        padding: 10px;
        background: #8492C2;
        font-size: 14px !important;
        border-radius: 4px;
        color: #fff;
        border: 0;
      }
    }
  }

  .dag-nav {
    border-top: solid 1px #808080;
    border-right: solid 1px #808080;
  }

  .icon-list .el-button::before,
  .icon-list .el-button i::before {
    color: #fff;
  }
}

/deep/ .dialog-val .el-input-group__append {
  background: #8492C2 !important;
  color: #fff !important;
}

.file-upload-box {
  .uploader-file-progress {
    background: transparent;
  }

  .uploader-file {
    border: 0;
  }
}

.menu-icon1 {
  content: url(~@/assets/img/icon/menu-icon1-dark.svg);
}

.menu-icon2 {
  content: url(~@/assets/img/icon/menu-icon2-dark.svg);
}

.menu-icon3 {
  content: url(~@/assets/img/icon/menu-icon3-dark.svg);
}

.menu-icon4 {
  content: url(~@/assets/img/icon/menu-icon4-dark.svg);
}

.menu-icon5 {
  content: url(~@/assets/img/icon/menu-icon5-dark.svg);
}

.menu-icon6 {
  content: url(~@/assets/img/icon/menu-icon6-dark.svg);
}

.menu-icon7 {
  content: url(~@/assets/img/icon/menu-icon7-dark.svg);
}

.menu-icon8 {
  content: url(~@/assets/img/icon/menu-icon8-dark.svg);
}

.menu-icon9 {
  content: url(~@/assets/img/icon/menu-icon9.svg);
}

.menu-icon10 {
  content: url(~@/assets/img/icon/menu-icon10.svg);
}

.menu-icon11 {
  content: url(~@/assets/img/icon/menu-icon11-dark.svg);
}

.menu-icon11-1 {
  content: url(~@/assets/img/icon/menu-icon11-1-dark.svg);
}

.menu-icon11-2 {
  content: url(~@/assets/img/icon/menu-icon11-2-dark.svg);
}

.menu-icon11-3 {
  content: url(~@/assets/img/icon/menu-icon11-3-dark.svg);
}

.menu-icon11-4 {
  content: url(~@/assets/img/icon/menu-icon11-4-dark.svg);
}

.menu-icon11-5 {
  content: url(~@/assets/img/icon/menu-icon11-5-dark.svg);
}

.menu-icon12 {
  content: url(~@/assets/img/icon/menu-icon12-dark.svg);
}

.menu-icon13 {
  content: url(~@/assets/img/icon/menu-icon13-dark.svg);
}

.menu-icon14 {
  content: url(~@/assets/img/icon/menu-icon14-dark.svg);
}

.menu-icon15 {
  content: url(~@/assets/img/icon/menu-icon15-dark.svg);
}

.menu-icon16 {
  content: url(~@/assets/img/icon/menu-icon16-dark.svg);
}

.menu-icon17 {
  content: url(~@/assets/img/icon/menu-icon17-dark.svg);
}

.menu-icon18 {
  content: url(~@/assets/img/icon/menu-icon18-dark.svg);
}

.is-active {
  .menu-icon1 {
    content: url(~@/assets/img/icon/menu-icon1-dark-active.svg);
  }

  .menu-icon2 {
    content: url(~@/assets/img/icon/menu-icon2-dark-active.svg);
  }

  .menu-icon3 {
    content: url(~@/assets/img/icon/menu-icon3-dark-active.svg);
  }

  .menu-icon4 {
    content: url(~@/assets/img/icon/menu-icon4-dark-active.svg);
  }

  .menu-icon5 {
    content: url(~@/assets/img/icon/menu-icon5-dark-active.svg);
  }

  .menu-icon6 {
    content: url(~@/assets/img/icon/menu-icon6-dark-active.svg);
  }

  .menu-icon8 {
    content: url(~@/assets/img/icon/menu-icon8-dark-active.svg);
  }

  .menu-icon11 {
    content: url(~@/assets/img/icon/menu-icon11-dark-active.svg);
  }

  .menu-icon12 {
    content: url(~@/assets/img/icon/menu-icon12-dark-active.svg);
  }

  .menu-icon13 {
    content: url(~@/assets/img/icon/menu-icon13-dark-active.svg);
  }

  .menu-icon16 {
    content: url(~@/assets/img/icon/menu-icon16-dark-active.svg);
  }

  .menu-icon17 {
    content: url(~@/assets/img/icon/menu-icon17-dark-active.svg);
  }

  .menu-icon18 {
    content: url(~@/assets/img/icon/menu-icon18-dark-active.svg);
  }
}

.el-tabs__nav-wrap {
  .el-tabs__item {
    font-size: 16px;
    color: rgba(164, 173, 205, 1);
  }

  .el-tabs__nav-scroll {
    padding: 0 15px;
  }

  &:after {
    height: 1px !important;
    background: rgba(78, 87, 118, 1) !important;
  }
}

.el-message-box__message p {
  color: black;
}

//数据集
.working-area {
  background: #0D0E15 !important;

  .lis-word {
    color: #fff !important;
  }
}

.dataset {
  .add_box_btn {
    float: right;
    border: 1px solid rgba(100, 177, 33, 1);
    background: rgba(100, 177, 33, 0.46);
    color: #fff;

    &:hover,
    &:active,
    &:focus {
      border: 1px solid rgba(100, 177, 33, 1);
      background: rgba(100, 177, 33, 0.46);
      color: #fff;
    }
  }
}

.el-table::before {
  height: 0 !important;
}

.version-list .version-item:hover {
  background: #1A1E2C !important;
}